<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="format-detection" content="telephone=no">
    <title>单词消消乐</title>
    <link rel="stylesheet" href="./style.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
</head>
<body>
    <!-- 粒子背景效果 -->
    <div class="particles" id="particles"></div>

    <!-- 图片容器 - 用于显示界面截图 -->
    <div id="imageContainer" style="display: none;">
        <img src="https://haisnap.tos-cn-beijing.volces.com/image/358134c5-df1d-47b1-8b51-44819db7cb01_1754214042434.jpg" alt="界面截图" style="max-width: 100%; height: auto;">
    </div>

    <div class="container">
        <!-- 标题区域 -->
        <div class="text-center mb-8">
            <h1 id="gameTitle" class="game-title text-6xl font-bold cursor-pointer hover:scale-105 transition-transform duration-300">
                单词消消乐
            </h1>
        </div>

        <!-- 菜单区域 -->
        <div class="menu-section">
            <!-- 单词数量滑块 -->
            <div class="menu-item">
                <label class="text-lg font-semibold text-gray-700 min-w-max">单词数量：</label>
                <div class="slider-container">
                    <input type="range" id="wordCountSlider" class="slider" min="5" max="50" value="10">
                    <div id="wordCountDisplay" class="word-count-display">10对</div>
                </div>
            </div>

            <!-- 导入词表和开始游戏按钮 -->
            <div class="menu-item">
                <input type="file" id="fileInput" class="file-input" accept=".xlsx,.xls,.csv">
                <button id="importBtn" class="btn btn-secondary">
                    📁 导入词表
                </button>
                <button id="startBtn" class="btn btn-primary">
                    🎮 开始游戏
                </button>
                <button id="wordListBtn" class="btn btn-secondary">
                    📖 单词表
                </button>
                <button id="settingsBtn" class="btn btn-secondary">
                    ⚙️ 设置
                </button>
                <button id="statsBtn" class="btn btn-secondary">
                    📊 统计
                </button>
            </div>
        </div>

        <!-- 设置面板 -->
        <div id="settingsPanel" class="settings-panel">
            <div class="settings-header">
                <h3 class="settings-title">游戏设置</h3>
                <button class="settings-close" id="closeSettings">×</button>
            </div>
            
            <!-- 发音设置 -->
            <div class="settings-group">
                <label class="settings-label">🔊 发音设置</label>
                <div class="settings-toggle">
                    <label class="toggle-switch">
                        <input type="checkbox" id="soundToggle" checked>
                        <span class="toggle-slider"></span>
                    </label>
                    <span class="toggle-label">启用发音</span>
                </div>
                <div class="settings-toggle">
                    <label class="toggle-switch">
                        <input type="checkbox" id="autoPlayToggle" checked>
                        <span class="toggle-slider"></span>
                    </label>
                    <span class="toggle-label">点击单词时自动发音</span>
                </div>
                <div class="voice-type-setting">
                    <label class="settings-label">发音类型</label>
                    <select id="voiceTypeSelect" class="voice-select">
                        <option value="en-US">美式发音 (en-US)</option>
                        <option value="en-GB">英式发音 (en-GB)</option>
                    </select>
                </div>
                <div class="voice-selection">
                    <label class="settings-label">选择语音</label>
                    <select id="voiceSelect" class="voice-select">
                        <option value="">默认语音</option>
                    </select>
                </div>
            </div>

            <!-- 导入设置 -->
            <div class="settings-group">
                <label class="settings-label">📥 导入设置</label>
                <div class="import-settings-group">
                    <div class="column-setting">
                        <label>单词列：</label>
                        <input type="number" id="wordColumnInput" class="column-input" min="0" value="0" placeholder="0">
                        <span class="column-hint">(从0开始计数)</span>
                    </div>
                    <div class="column-setting">
                        <label>释义列：</label>
                        <input type="number" id="meaningColumnInput" class="column-input" min="0" value="1" placeholder="1">
                        <span class="column-hint">(从0开始计数)</span>
                    </div>
                    <div class="column-setting">
                        <label>起始行：</label>
                        <input type="number" id="startRowInput" class="column-input" min="0" value="0" placeholder="0">
                        <span class="column-hint">(从0开始计数)</span>
                    </div>
                    <div class="import-hint">
                        <small>💡 提示：Excel表格的列从0开始计数，第一列为0，第二列为1，以此类推</small>
                    </div>
                </div>
            </div>

            <!-- 界面设置 -->
            <div class="settings-group">
                <label class="settings-label">🎨 界面设置</label>
                <div class="settings-toggle">
                    <label class="toggle-switch">
                        <input type="checkbox" id="darkModeToggle">
                        <span class="toggle-slider"></span>
                    </label>
                    <span class="toggle-label">暗色模式</span>
                </div>
                <div class="animation-speed-setting">
                    <label class="settings-label">动画速度</label>
                    <div class="slider-container">
                        <input type="range" id="animationSpeedSlider" class="slider" min="0.5" max="2" step="0.1" value="1">
                        <div id="animationSpeedDisplay" class="word-count-display">1x</div>
                    </div>
                </div>
            </div>

            <!-- 保存设置按钮 -->
            <div class="modal-buttons">
                <button id="saveSettingsBtn" class="btn btn-success">
                    💾 保存设置
                </button>
            </div>
        </div>

        <!-- 计时区域 -->
        <div class="timer-section">
            <div class="timer-display">
                耗时：<span id="gameTime" class="timer-number">0秒</span>
            </div>
        </div>

        <!-- 游戏面板 -->
        <div id="gameBoard" class="game-board word-panel">
            <div class="col-span-full text-center text-gray-500 text-lg">
                请先导入单词表
            </div>
        </div>
    </div>

    <!-- 开始游戏选项模态框 - 优化游戏模式选择界面 -->
    <div id="startGameModal" class="modal hidden">
        <div class="modal-content animate__animated">
            <h2 class="modal-title">选择游戏模式</h2>
            
            <div class="start-game-options">
                <div class="start-option">
                    <div class="option-icon">🔄</div>
                    <div class="option-title">全部重新开始</div>
                    <div class="option-description">重置所有进度，从第一个单词开始</div>
                    <button class="option-btn btn btn-primary" onclick="selectGameMode('reset')">
                        开始新游戏
                    </button>
                </div>
                
                <div class="start-option">
                    <div class="option-icon">▶️</div>
                    <div class="option-title">继续当前进度</div>
                    <div class="option-description">保持当前进度，继续未完成的单词</div>
                    <button class="option-btn btn btn-success" onclick="selectGameMode('continue')">
                        继续游戏
                    </button>
                </div>
            </div>
            
            <div class="random-word-option">
                <label class="import-option-label">
                    <input type="checkbox" id="randomWordCheckbox" class="import-option-checkbox">
                    随机单词模式
                    <div class="import-option-description">从单词表中随机选择单词，每次选择不重复</div>
                </label>
            </div>
            
            <div class="modal-buttons">
                <button id="closeStartModal" class="btn btn-secondary">
                    ❌ 取消
                </button>
            </div>
        </div>
    </div>

    <!-- 游戏完成模态框 -->
    <div id="gameModal" class="modal hidden">
        <div class="modal-content animate__animated">
            <h2 class="modal-title">🎉 恭喜完成！</h2>
            <div class="modal-time" id="finalTime">0秒</div>
            <p class="text-white text-lg mb-4">你成功完成了所有单词匹配！</p>
            <div class="modal-buttons">
                <button id="continueBtn" class="btn btn-success">
                    🚀 继续挑战
                </button>
                <button id="closeModal" class="btn btn-secondary">
                    ❌ 关闭
                </button>
            </div>
        </div>
    </div>

    <!-- Excel导入预览模态框 - 优化导入单词浏览界面 -->
    <div id="excelPreviewModal" class="modal hidden">
        <div class="modal-content excel-modal animate__animated">
            <h2 class="modal-title">📋 单词表导入预览</h2>
            
            <!-- 预览表格 -->
            <div class="excel-preview">
                <table id="excelPreviewTable" class="excel-table">
                    <thead>
                        <tr>
                            <th>单词</th>
                            <th>释义</th>
                        </tr>
                    </thead>
                    <tbody id="excelPreviewBody">
                        <!-- 动态填充 -->
                    </tbody>
                </table>
            </div>
            
            <!-- 导入选项 -->
            <div class="import-options">
                <div class="import-options-title">
                    ⚙️ 导入选项
                </div>
                <div class="import-option-item">
                    <input type="checkbox" id="overwriteCheckbox" class="import-option-checkbox" checked>
                    <label for="overwriteCheckbox" class="import-option-label">
                        覆盖原有单词表
                        <div class="import-option-description">勾选后将替换现有单词表，否则追加到现有单词表</div>
                    </label>
                </div>
                <div class="import-option-item">
                    <input type="checkbox" id="shuffleCheckbox" class="import-option-checkbox" checked>
                    <label for="shuffleCheckbox" class="import-option-label">
                        打乱单词顺序
                        <div class="import-option-description">勾选后将随机打乱单词顺序，否则保持原有顺序</div>
                    </label>
                </div>
                <div class="import-option-item">
                    <input type="checkbox" id="skipDuplicatesCheckbox" class="import-option-checkbox">
                    <label for="skipDuplicatesCheckbox" class="import-option-label">
                        跳过重复单词
                        <div class="import-option-description">勾选后将自动跳过已存在的单词</div>
                    </label>
                </div>
            </div>
            
            <div class="modal-buttons">
                <button id="confirmImportBtn" class="btn btn-success">
                    ✅ 确认导入
                </button>
                <button id="cancelImportBtn" class="btn btn-secondary">
                    ❌ 取消
                </button>
            </div>
        </div>
    </div>

    <!-- 单词表模态框 - 优化统计信息和布局 -->
    <div id="wordListModal" class="modal hidden word-list-modal">
        <div class="modal-content animate__animated">
            <div class="word-list-header">
                <h2 class="word-list-title">📖 单词表管理</h2>
                <button id="closeWordListBtn" class="btn btn-secondary">❌ 关闭</button>
            </div>
            
            <!-- 单词表搜索 -->
            <div class="word-list-search">
                <input type="text" id="wordListSearch" placeholder="搜索单词或释义...">
                <button id="wordListSearchBtn" class="btn btn-primary">🔍 搜索</button>
                <button id="clearSearchBtn" class="btn btn-secondary">🗑️ 清空</button>
            </div>
            
            <!-- 统计信息栏 - 水平布局 -->
            <div class="word-stats-bar">
                <button class="stats-filter-btn active" data-filter="all" onclick="filterWordList('all')">
                    📋 全部 <span class="stat-count" id="totalCount">0</span>
                </button>
                <button class="stats-filter-btn" data-filter="matched" onclick="filterWordList('matched')">
                    ✅ 已配对 <span class="stat-count" id="matchedCount">0</span>
                </button>
                <button class="stats-filter-btn" data-filter="unmatched" onclick="filterWordList('unmatched')">
                    ⏳ 未配对 <span class="stat-count" id="unmatchedCount">0</span>
                </button>
                <button class="stats-filter-btn" data-filter="favorite" onclick="filterWordList('favorite')">
                    ❤️ 收藏 <span class="stat-count" id="favoriteCount">0</span>
                </button>
                <button class="stats-filter-btn" data-filter="familiar" onclick="filterWordList('familiar')">
                    😊 熟悉 <span class="stat-count" id="familiarCount">0</span>
                </button>
                <button class="stats-filter-btn" data-filter="vague" onclick="filterWordList('vague')">
                    🤔 模糊 <span class="stat-count" id="vagueCount">0</span>
                </button>
                <button class="stats-filter-btn" data-filter="unfamiliar" onclick="filterWordList('unfamiliar')">
                    😵 陌生 <span class="stat-count" id="unfamiliarCount">0</span>
                </button>
            </div>
            
            <div id="wordListContent" class="word-list-content">
                <!-- 动态填充单词表 -->
            </div>
            
            <div class="modal-buttons fixed-buttons">
                <button id="exportWordsBtn" class="btn btn-secondary btn-large">
                    📤 导出单词表
                </button>
                <button id="startMemoryBtn" class="btn btn-primary btn-large">
                    🧠 开始记忆
                </button>
            </div>
        </div>
    </div>

    <!-- 单词记忆选择模态框 - 优化记忆模式选择界面 -->
    <div id="memoryChoiceModal" class="modal hidden">
        <div class="modal-content memory-choice-modal animate__animated">
            <h2 class="memory-choice-title">选择记忆模式</h2>
            
            <div class="memory-choice-options">
                <button class="memory-choice-btn primary" onclick="selectMemoryMode('new')">
                    🆕 重新开始学习
                </button>
                <button class="memory-choice-btn secondary" onclick="selectMemoryMode('continue')">
                    📈 继续上次学习
                </button>
            </div>
            
            <div class="memory-filter-section">
                <label for="memoryFilter" class="filter-label">筛选单词类型：</label>
                <select id="memoryFilter" class="memory-filter-select">
                    <option value="all">全部单词</option>
                    <option value="familiar">熟悉的单词</option>
                    <option value="vague">模糊的单词</option>
                    <option value="unfamiliar">陌生的单词</option>
                </select>
            </div>
            
            <div class="modal-buttons">
                <button id="closeMemoryChoiceBtn" class="btn btn-secondary">
                    ❌ 取消
                </button>
            </div>
        </div>
    </div>

    <!-- 单词记忆模态框 - 优化记忆卡片界面 -->
    <div id="wordMemoryModal" class="modal hidden">
        <div class="modal-content animate__animated">
            <h2 class="modal-title">单词记忆</h2>
            
            <!-- 记忆进度条 -->
            <div class="memory-progress">
                <div class="memory-progress-text">
                    <span id="progressCurrent">1</span>/<span id="progressTotal">100</span>
                </div>
                <div class="memory-progress-bar">
                    <div class="memory-progress-fill" id="progressBarFill" style="width: 1%"></div>
                </div>
                <div class="memory-progress-text">
                    <span id="progressPercentage">1%</span>
                </div>
            </div>
            
            <!-- 单词记忆卡片 -->
            <div id="wordMemoryCard" class="word-memory-card">
                <!-- 动态填充单词卡片 -->
            </div>
            
            <!-- 记忆控制按钮 -->
            <div class="memory-controls">
                <button id="prevMemoryBtn" class="memory-nav-btn" onclick="prevMemoryWord()">
                    ⬅️ 上一个
                </button>
                <button class="memory-nav-btn" onclick="flipCard()">
                    🔄 翻转
                </button>
                <button id="nextMemoryBtn" class="memory-nav-btn" onclick="nextMemoryWord()">
                    下一个 ➡️
                </button>
            </div>
            
            <!-- 记忆状态按钮 -->
            <div class="memory-status-buttons">
                <button class="memory-status-btn btn-familiar" onclick="markWordStatus('familiar')">
                    熟悉 ✅
                </button>
                <button class="memory-status-btn btn-vague" onclick="markWordStatus('vague')">
                    模糊 🤔
                </button>
                <button class="memory-status-btn btn-unfamiliar" onclick="markWordStatus('unfamiliar')">
                    陌生 ❌
                </button>
            </div>
            
            <div class="modal-buttons">
                <button id="closeMemoryBtn" class="btn btn-secondary">
                    ❌ 结束记忆
                </button>
            </div>
        </div>
    </div>

    <!-- 游戏统计模态框 -->
    <div id="statsModal" class="modal hidden">
        <div class="modal-content animate__animated">
            <h2 class="modal-title">📊 游戏统计</h2>
            
            <!-- 统计数据展示区域 -->
            <div class="stats-container">
                <div class="stats-section">
                    <h3 class="stats-section-title">总体统计</h3>
                    <div class="stats-grid">
                        <div class="stats-item">
                            <div class="stats-label">总游戏次数</div>
                            <div class="stats-value" id="totalGamesPlayed">0</div>
                        </div>
                        <div class="stats-item">
                            <div class="stats-label">总游戏时间</div>
                            <div class="stats-value" id="totalGameTime">0分钟</div>
                        </div>
                        <div class="stats-item">
                            <div class="stats-label">平均每局时间</div>
                            <div class="stats-value" id="avgGameTime">0秒</div>
                        </div>
                        <div class="stats-item">
                            <div class="stats-label">最快完成时间</div>
                            <div class="stats-value" id="bestGameTime">-</div>
                        </div>
                    </div>
                </div>
                
                <div class="stats-section">
                    <h3 class="stats-section-title">单词统计</h3>
                    <div class="stats-grid">
                        <div class="stats-item">
                            <div class="stats-label">总单词数</div>
                            <div class="stats-value" id="totalWords">0</div>
                        </div>
                        <div class="stats-item">
                            <div class="stats-label">已学习单词</div>
                            <div class="stats-value" id="learnedWords">0</div>
                        </div>
                        <div class="stats-item">
                            <div class="stats-label">熟悉单词</div>
                            <div class="stats-value" id="familiarWordsCount">0</div>
                        </div>
                        <div class="stats-item">
                            <div class="stats-label">陌生单词</div>
                            <div class="stats-value" id="unfamiliarWordsCount">0</div>
                        </div>
                    </div>
                </div>
                
                <div class="stats-section">
                    <h3 class="stats-section-title">学习进度</h3>
                    <div class="stats-progress">
                        <div class="stats-progress-bar">
                            <div class="stats-progress-fill" id="learningProgressBar" style="width: 0%"></div>
                        </div>
                        <div class="stats-progress-text">
                            <span id="learningProgressText">0%</span> 完成
                        </div>
                    </div>
                </div>
                
                <div class="stats-section">
                    <h3 class="stats-section-title">最近游戏记录</h3>
                    <div class="stats-recent-games" id="recentGames">
                        <!-- 动态填充最近游戏记录 -->
                        <div class="stats-no-data">暂无游戏记录</div>
                    </div>
                </div>
            </div>
            
            <div class="modal-buttons">
                <button id="resetStatsBtn" class="btn btn-warning">
                    🗑️ 重置统计
                </button>
                <button id="closeStatsBtn" class="btn btn-secondary">
                    ❌ 关闭
                </button>
            </div>
        </div>
    </div>

    <!-- 导入Excel库 -->
    <script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>
    <script src="./script.js"></script>

    <script>
        // 创建粒子背景效果
        function createParticles() {
            const particlesContainer = document.getElementById('particles');
            if (!particlesContainer) return;
            
            const particleCount = 50;

            for (let i = 0; i < particleCount; i++) {
                const particle = document.createElement('div');
                particle.className = 'particle';
                particle.style.left = Math.random() * 100 + '%';
                particle.style.top = Math.random() * 100 + '%';
                particle.style.animationDelay = Math.random() * 6 + 's';
                particle.style.animationDuration = (Math.random() * 3 + 3) + 's';
                particlesContainer.appendChild(particle);
            }
        }

        // 游戏模式选择函数
        function selectGameMode(mode) {
            const modal = document.getElementById('startGameModal');
            const randomWordCheckbox = document.getElementById('randomWordCheckbox');
            
            if (modal) {
                modal.classList.add('hidden');
            }
            
            // 保存随机单词模式设置
            if (randomWordCheckbox && typeof gameState !== 'undefined') {
                gameState.settings.randomWordMode = randomWordCheckbox.checked;
                localStorage.setItem('wordGameSettings', JSON.stringify(gameState.settings));
            }
            
            if (typeof startNewGame === 'function') {
                startNewGame(mode === 'reset'); // reset模式为true，continue模式为false
            }
        }

        // 记忆模式选择函数
        function selectMemoryMode(mode) {
            const modal = document.getElementById('memoryChoiceModal');
            const filterType = document.getElementById('memoryFilter')?.value || 'all';
            
            if (modal) {
                modal.classList.add('hidden');
            }
            
            if (typeof startWordMemory === 'function') {
                const resetMemory = (mode === 'new' || mode === 'weak' || mode === 'random');
                startWordMemory(resetMemory, filterType);
            }
        }

        // 记忆模式选项卡切换
        function switchMemoryTab(tabName) {
            // 切换选项卡按钮状态
            const tabButtons = document.querySelectorAll('.memory-tab-btn');
            tabButtons.forEach(btn => {
                btn.classList.remove('active');
                if (btn.dataset.tab === tabName) {
                    btn.classList.add('active');
                }
            });
            
            // 切换内容区域
            const tabContents = document.querySelectorAll('.memory-tab-content');
            tabContents.forEach(content => {
                content.classList.remove('active');
            });
            
            const targetContent = document.getElementById(tabName + 'TabContent');
            if (targetContent) {
                targetContent.classList.add('active');
            }
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            console.log('DOM加载完成，开始初始化界面');
            
            // 创建粒子效果
            createParticles();
            
            // 确保所有必要的元素都存在
            const requiredElements = [
                'gameTitle', 'wordCountSlider', 'wordCountDisplay', 
                'fileInput', 'importBtn', 'startBtn', 'wordListBtn', 
                'settingsBtn', 'gameBoard', 'gameTime'
            ];
            
            let missingElements = [];
            requiredElements.forEach(id => {
                if (!document.getElementById(id)) {
                    missingElements.push(id);
                }
            });
            
            if (missingElements.length > 0) {
                console.error('缺少必要元素:', missingElements);
            } else {
                console.log('所有必要元素已加载');
            }
            
            // 设置面板事件监听 - 修复设置按钮无响应问题
            const settingsBtn = document.getElementById('settingsBtn');
            const closeSettings = document.getElementById('closeSettings');
            const settingsPanel = document.getElementById('settingsPanel');
            
            if (settingsBtn && settingsPanel) {
                // 移除所有现有事件监听器
                settingsBtn.replaceWith(settingsBtn.cloneNode(true));
                const newSettingsBtn = document.getElementById('settingsBtn');
                
                newSettingsBtn.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    console.log('设置按钮被点击'); // 调试日志
                    settingsPanel.classList.toggle('open');
                    if (settingsPanel.classList.contains('open')) {
                        updateAnimationSpeedDisplay();
                        if (typeof updateVoiceOptions === 'function') {
                            updateVoiceOptions();
                        }
                    }
                });
            }
            
            if (closeSettings && settingsPanel) {
                closeSettings.addEventListener('click', function() {
                    settingsPanel.classList.remove('open');
                });
            }
            
            // 动画速度滑块
            const animationSpeedSlider = document.getElementById('animationSpeedSlider');
            if (animationSpeedSlider) {
                animationSpeedSlider.addEventListener('input', updateAnimationSpeedDisplay);
            }
            
            // 开始游戏按钮事件监听
            const startBtn = document.getElementById('startBtn');
            const startGameModal = document.getElementById('startGameModal');
            const closeStartModal = document.getElementById('closeStartModal');
            const randomWordCheckbox = document.getElementById('randomWordCheckbox');

            if (startBtn && startGameModal) {
                startBtn.addEventListener('click', function() {
                    if (typeof gameState !== 'undefined' && gameState.words.length === 0) {
                        if (typeof showToast === 'function') {
                            showToast('请先导入单词表！', 'warning');
                        } else {
                            alert('请先导入单词表！');
                        }
                        return;
                    }
                    startGameModal.classList.remove('hidden');
                    
                    // 同步随机单词模式设置
                    if (randomWordCheckbox && typeof gameState !== 'undefined') {
                        randomWordCheckbox.checked = gameState.settings.randomWordMode || false;
                    }
                });
            }

            if (closeStartModal && startGameModal) {
                closeStartModal.addEventListener('click', function() {
                    startGameModal.classList.add('hidden');
                });
            }
            
            // 单词记忆选择模态框事件监听
            const memoryChoiceModal = document.getElementById('memoryChoiceModal');
            const closeMemoryChoiceBtn = document.getElementById('closeMemoryChoiceBtn');
            const startMemoryBtn = document.getElementById('startMemoryBtn');
            
            if (startMemoryBtn && memoryChoiceModal) {
                startMemoryBtn.addEventListener('click', function() {
                    if (typeof closeWordListModal === 'function') {
                        closeWordListModal();
                    }
                    memoryChoiceModal.classList.remove('hidden');
                });
            }
            
            if (closeMemoryChoiceBtn && memoryChoiceModal) {
                closeMemoryChoiceBtn.addEventListener('click', function() {
                    memoryChoiceModal.classList.add('hidden');
                });
            }
            
            console.log('界面初始化完成');
        });

        // 动画速度显示更新
        function updateAnimationSpeedDisplay() {
            const slider = document.getElementById('animationSpeedSlider');
            const display = document.getElementById('animationSpeedDisplay');
            if (slider && display) {
                display.textContent = slider.value + 'x';
                document.documentElement.style.setProperty('--animation-speed', slider.value);
            }
        }

        // 防止页面刷新时的数据丢失警告
        window.addEventListener('beforeunload', function(e) {
            if (typeof gameState !== 'undefined' && gameState.isGameActive) {
                e.preventDefault();
                e.returnValue = '游戏正在进行中，确定要离开吗？';
                return e.returnValue;
            }
        });

        // 键盘快捷键支持
        document.addEventListener('keydown', function(e) {
            // ESC键关闭模态框
            if (e.key === 'Escape') {
                const modals = [
                    'gameModal', 'excelPreviewModal', 'wordListModal', 
                    'wordMemoryModal', 'startGameModal', 'memoryChoiceModal'
                ];
                
                modals.forEach(modalId => {
                    const modal = document.getElementById(modalId);
                    if (modal && !modal.classList.contains('hidden')) {
                        modal.classList.add('hidden');
                    }
                });
                
                const settingsPanel = document.getElementById('settingsPanel');
                if (settingsPanel && settingsPanel.classList.contains('open')) {
                    settingsPanel.classList.remove('open');
                }
            }
            
            // 空格键开始游戏
            if (e.key === ' ' && typeof gameState !== 'undefined' && !gameState.isGameActive) {
                e.preventDefault();
                const startBtn = document.getElementById('startBtn');
                if (startBtn) {
                    startBtn.click();
                }
            }
            
            // S键打开设置
            if (e.key === 's' && e.ctrlKey) {
                e.preventDefault();
                const settingsPanel = document.getElementById('settingsPanel');
                if (settingsPanel) {
                    settingsPanel.classList.toggle('open');
                    updateAnimationSpeedDisplay();
                }
            }
            
            // L键打开单词表
            if (e.key === 'l' && e.ctrlKey) {
                e.preventDefault();
                if (typeof openWordListModal === 'function') {
                    openWordListModal();
                }
            }
        });

        // 全局错误处理
        window.addEventListener('error', function(e) {
            console.error('全局错误:', e.error);
            if (typeof showToast === 'function') {
                showToast('发生了一个错误，请刷新页面重试', 'error');
            } else {
                alert('发生了一个错误，请刷新页面重试');
            }
        });

        // 未处理的Promise错误
        window.addEventListener('unhandledrejection', function(e) {
            console.error('未处理的Promise错误:', e.reason);
            if (typeof showToast === 'function') {
                showToast('发生了一个错误，请刷新页面重试', 'error');
            }
        });

        // 网络状态检测
        window.addEventListener('online', function() {
            if (typeof showToast === 'function') {
                showToast('网络连接已恢复', 'success');
            }
        });

        window.addEventListener('offline', function() {
            if (typeof showToast === 'function') {
                showToast('网络连接已断开，游戏可离线运行', 'warning');
            }
        });

        // 防止双击缩放
        let lastTouchEnd = 0;
        document.addEventListener('touchend', function(event) {
            const now = (new Date()).getTime();
            if (now - lastTouchEnd <= 300) {
                event.preventDefault();
            }
            lastTouchEnd = now;
        }, false);
    </script>
</body>
</html>